
import Styles from './index.module.less';
import {useEffect,useState} from 'react'
import Taro from '@tarojs/taro'
import Back from '../../images/common/back.png'

export default function index(props){
    const [statusBarHeight, setStatusBarHeight] = useState(0);
    const [menuBtnBarHeight, setMenuBtnBarHeight] = useState(0);

    useEffect(()=>{
        //获取状态栏的高度
        let statusBarHeight = Taro.getSystemInfoSync().statusBarHeight;
        //获取菜单按钮（右上角胶囊按钮）上边界坐标
        let menuBtnTop = Taro.getMenuButtonBoundingClientRect().top;
        //获取状态栏与菜单按钮（右上角胶囊按钮）之间的间隔距离*2
        let gap = (menuBtnTop-statusBarHeight)*2;
        //获取菜单按钮（右上角胶囊按钮）高度 + gap
        let menuBtnBarHeight = Taro.getMenuButtonBoundingClientRect().height +  gap;

        setStatusBarHeight(statusBarHeight);
        setMenuBtnBarHeight(menuBtnBarHeight);

        Taro.setStorageSync("navBarHeight",statusBarHeight+menuBtnBarHeight);

    })

    const {title,backTo,backgroundColor} = props;

    const handleBackTo = () => {
        let backTo = props.backTo;
        switch(backTo){
            case "/pages/index/index" || "/pages/book/index" || "/pages/center/index " || "/pages/list/index":
                Taro.switchTab({
                    url:backTo
                })
            case "prev":
                Taro.navigateBack()
                
        }
    }

    return (
        <view class={Styles.navBar} style={{backgroundColor:backgroundColor??"#FAF0EF"}}>
            <view class={Styles.statusBar} style={{height:(statusBarHeight)}}></view>
            <view class={Styles.menuBtnBar} style={{height:(menuBtnBarHeight)}}>
                <view class={Styles.title}>{title??"Perfect体验"}</view>
                {backTo && 
                    <view class={Styles.back_area} style={{height:(menuBtnBarHeight)}} onClick={()=>{
                        handleBackTo()
                    }}>
                        <image src={Back} class={Styles.img}/>
                    </view>
                }
               
            </view>
        </view>
    )
}